<template>
    <el-card v-loading="loading">
        <div class="card-header">
            <span>提示语</span>
        </div>
        <el-form label-width="auto" :model="formCueWord" :rules="rules" ref="formRef">
            <el-form-item label="上下文存储策略" prop="context_storage_strategy" :label-width="formLabelWidth">
                <el-radio-group v-model="formCueWord.context_storage_strategy">
                    <el-radio :label="10">数量窗口策略</el-radio>
                    <el-radio :label="20">Token限制策略</el-radio>
                    <el-radio :label="30">自动总结策略</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="保存交换次数" :label-width="formLabelWidth" prop="context_storage_limit">
                <el-input-number v-model="formCueWord.context_storage_limit" :min="1" :max="1000"></el-input-number>
            </el-form-item>
            <el-form-item label="欢迎语" :label-width="formLabelWidth" prop="welcome_type">
                <el-radio-group v-model="formCueWord.welcome_type">
                    <el-radio :label="1">自动</el-radio>
                    <el-radio :label="2">自定义</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" v-if="formCueWord.welcome_type == 2" prop="welcome_content">
                <el-input v-model="formCueWord.welcome_content" size="large" clearable />
            </el-form-item>
            <el-form-item label="问题越界回复" :label-width="formLabelWidth" prop="cross_border_reply_content">
                <el-input v-model="formCueWord.cross_border_reply_content" size="large" clearable />
            </el-form-item>
            <el-form-item label="转人工回复" :label-width="formLabelWidth" prop="human_customer_service">
                <el-input v-model="formCueWord.human_customer_service" size="large" clearable />
            </el-form-item>
        </el-form>
    </el-card>
    <div class="btn-box">
        <el-button size="large" @click="defaultClick">设为默认值</el-button>
        <el-button size="large" type="primary" @click="saveClick">保存</el-button>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
const formLabelWidth = '124px';
import sysSetting from "../../api/sysSetting"
const hasToken = <string>localStorage.getItem('accessToken');
const loading = ref(false);

//定义提示语字段类型
interface defineCueWord {
    context_storage_strategy?: number | null,
    context_storage_limit?: number | null,
    welcome_type?: number | null,
    welcome_content?: string | null,
    cross_border_reply_content?: string | null,
    human_customer_service?: string | null,
};
//  card默认参数
const formCueWord = ref<defineCueWord>({
    context_storage_strategy: 10,
    context_storage_limit: 0,
    welcome_type: 0,
    welcome_content: '',
    cross_border_reply_content: '',
    human_customer_service: ''
});


//获取提示词数据
const getCueWordData = () => {
    loading.value = true;
    sysSetting.getPromptInfo(hasToken).then(res => {
        // console.log('res===', res);
        Object.assign(allData, res.data)
        formCueWord.value = {
            context_storage_strategy: res.data.context_storage_strategy,
            context_storage_limit: res.data.context_storage_limit,
            welcome_type: res.data.welcome_type,
            welcome_content: res.data.welcome_content,
            cross_border_reply_content: res.data.cross_border_reply_content,
            human_customer_service: res.data.human_customer_service,
        }
    }).finally(() => {
        // ElMessage.error('获取用户信息失败');
        loading.value = false;
    });
};
// 储存所有数据\默认值
const allData = reactive({
    context_storage_strategy: 0,
    context_storage_limit: 0,
    welcome_type: 0,
    welcome_content: '',
    cross_border_reply_content: "",
    human_customer_service: ""
})
//设置默认值
const defaultClick = () => {
    formCueWord.value = {
        context_storage_strategy: allData.context_storage_strategy,
        context_storage_limit: allData.context_storage_limit,
        welcome_type: allData.welcome_type,
        welcome_content: allData.welcome_content,
        cross_border_reply_content: allData.cross_border_reply_content,
        human_customer_service: allData.human_customer_service
    }
}
// 表单校验规则
const formRef = ref(null);
const rules = {
    context_storage_strategy: [{ required: true, message: '请选择上下文存储策略', trigger: 'change' }],
    context_storage_limit: [{ required: true, message: '请输入保存交换次数', trigger: 'change' }],
    welcome_type: [{ required: true, message: '请选择欢迎语类型', trigger: 'change' }],
    welcome_content: [{ required: true, message: '请输入自定义欢迎语', trigger: 'blur' }],
    cross_border_reply_content: [{ required: true, message: '请输入问题越界回复', trigger: 'blur' }],
    human_customer_service: [{ required: true, message: '请输入转人工回复', trigger: 'blur' }],
};
//保存
const saveClick = () => {
    // console.log('allData',allData);
    // console.log('formKbbase.value',formKbbase.value);
    //组合编辑数据
    const obj = {
        context_storage_strategy: formCueWord.value.context_storage_strategy,
        context_storage_limit: formCueWord.value.context_storage_limit,
        welcome_type: formCueWord.value.welcome_type,
        welcome_content: formCueWord.value.welcome_content,
        cross_border_reply_content: formCueWord.value.cross_border_reply_content,
        human_customer_service: formCueWord.value.human_customer_service,
    };
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            sysSetting.updatePromptInfo(hasToken, obj).then(res => {
                ElMessage.success('保存成功');
                getCueWordData();
            }).catch(error => {
                //   console.error(error);
                ElMessage.error('保存失败');
            });
        }else{
            ElMessage.error('信息未填写完整');
        }
    })

}


getCueWordData();

</script>

<style scoped>
.el-card {
    width: 100%;
    margin-bottom: 30px;
}

.card-header {
    text-align: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.btn-box {
    float: right;
}
</style>